<template>
	<div ref="barBox" style="width: 100%; height: 100%"></div>
</template>

<script setup>
	import * as echarts from "echarts";
	import {
		ref,
		onMounted,
		watch
	} from "vue";

	const barBox = ref(null);
	const option = ref(null);
	let myChart = null;

	const myProps = defineProps({
		//文本标题
		bartext: {
			type: String,
			required: true,
		},
		//柱子颜色
		barcolor: {
			type: String,
			required: true,
		},
		// 横向类别
		namedata: {
			type: Array,
			required: true,
		},
		//纵向数据
		valuedata: {
			type: Array,
			required: true,
		},
	});

	//监听数据的变化
	watch(
		() => option.value,
		(newvalue, oldvalue) => {
			myChart.setOption(option.value);
		}, {
			deep: true,
		}
	);

	onMounted(() => {
		myChart = echarts.init(barBox.value, 'dark', {
			renderer: 'canvas',
			useDirtyRect: false
		});
		var app = {};

		option.value = {
			backgroundColor:"#001432",
			title: {
				text: myProps.bartext,
				textStyle: {
					fontSize: "14px",
				},
				left: "center",
				top: "20px"
			},
			xAxis: {
				type: 'category',
				data: myProps.namedata
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: myProps.valuedata,
				type: 'bar',
				itemStyle: {
					color: myProps.barcolor
				},
				barCategoryGap: "50%"
			}]
		};

		if (option.value && typeof option.value === 'object') {
			myChart.setOption(option.value);
		}

		window.addEventListener('resize', myChart.resize);
	});
</script>

<style>
</style>
